<template>
    <div class="app-container towSearchHeader">
        <div class="customContainer ">
            <!-- 搜索头 -->
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
                <el-form-item>
                    <el-checkbox true-label="1" false-label="0" v-model="formInline.look_del" @change="lookDelChange"
                        border>
                        查看已删门店
                    </el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-date-picker :editable="false" :clearable="false" v-model="pickerDate" value-format="yyyy.MM.dd"
                        type="daterange" align="right" unlink-panels range-separator="-" start-placeholder="开始日期"
                        end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-select filterable placeholder="选择门店" v-model="formInline.store_id">
                        <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <dj-button size="small" @search="searchClick" />
                </el-form-item>
                <el-form-item>
                    <el-tooltip class="item" effect="dark" placement="bottom-end">
                        <div slot="content" style="line-height:20px;width:400px">
                            1.该表统计门店营收细分数据 <br>
                            2.售币类套餐金额处提示：充值办卡以及售币类套餐（缴费办卡套餐和类型为售币类套餐的活动套餐）营收数据
                        </div>
                        <i class="el-icon-question"></i>
                    </el-tooltip>
                </el-form-item>
            </el-form>
            <!-- 权限tap标签分类 -->
            <el-tabs v-model="formInline.type" @tab-click="tabClick">
                <el-tab-pane label="售币类收入" name="1"></el-tab-pane>
                <el-tab-pane label="门禁区收入" name="2"></el-tab-pane>
                <el-tab-pane label="其他金额" name="3"></el-tab-pane>
                <el-tab-pane label="合计收入" name="4"></el-tab-pane>
            </el-tabs>
            <!-- 表格 -->
            <transition name="fade" mode="out-in">
                <!-- template 是不存在的组件，可以用来写判断语句，表格绑定key值，让动画找到 -->
                <template v-if="formInline.type==1">
                    <el-table highlight-current-row show-summary :data="list" v-loading.body="listLoading" border
                        size="small" :key="formInline.type">
                        <el-table-column align="center" label="日期" width="90">
                            <template slot-scope="scope">
                                <span
                                    :class="(scope.row.week==5)?'fridayColor':(scope.row.week==0||scope.row.week==6)?'weekendColor':''">{{scope.row.datetime}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="0-49元">
                            <el-table-column align="center" prop="t1" label="笔数"></el-table-column>
                            <el-table-column align="center" prop="m1" label="金额"></el-table-column>
                        </el-table-column>
                        <el-table-column align="center" label="50元">
                            <el-table-column align="center" prop="t2" label="笔数"></el-table-column>
                            <el-table-column align="center" prop="m2" label="金额"></el-table-column>
                        </el-table-column>
                        <el-table-column align="center" label="51-99元">
                            <el-table-column align="center" prop="t3" label="笔数"></el-table-column>
                            <el-table-column align="center" prop="m3" label="金额"></el-table-column>
                        </el-table-column>
                        <el-table-column align="center" label="100元">
                            <el-table-column align="center" prop="t4" label="笔数"></el-table-column>
                            <el-table-column align="center" prop="m4" label="金额"></el-table-column>
                        </el-table-column>
                        <el-table-column align="center" label="101-199元">
                            <el-table-column align="center" prop="t5" label="笔数"></el-table-column>
                            <el-table-column align="center" prop="m5" label="金额"></el-table-column>
                        </el-table-column>
                        <el-table-column align="center" label="200元">
                            <el-table-column align="center" prop="t6" label="笔数"></el-table-column>
                            <el-table-column align="center" prop="m6" label="金额"></el-table-column>
                        </el-table-column>
                        <el-table-column align="center" label="201-299元">
                            <el-table-column align="center" prop="t7" label="笔数"></el-table-column>
                            <el-table-column align="center" prop="m7" label="金额"></el-table-column>
                        </el-table-column>
                        <el-table-column align="center" label="300元">
                            <el-table-column align="center" prop="t8" label="笔数"></el-table-column>
                            <el-table-column align="center" prop="m8" label="金额"></el-table-column>
                        </el-table-column>
                        <el-table-column align="center" label="301-499元">
                            <el-table-column align="center" prop="t9" label="笔数"></el-table-column>
                            <el-table-column align="center" prop="m9" label="金额"></el-table-column>
                        </el-table-column>
                        <el-table-column align="center" label="500元">
                            <el-table-column align="center" prop="t10" label="笔数"></el-table-column>
                            <el-table-column align="center" prop="m10" label="金额"></el-table-column>
                        </el-table-column>
                        <el-table-column align="center" label="501-999元">
                            <el-table-column align="center" prop="t11" label="笔数"></el-table-column>
                            <el-table-column align="center" prop="m11" label="金额"></el-table-column>
                        </el-table-column>
                        <el-table-column align="center" label="1000元及以上">
                            <el-table-column align="center" prop="t12" label="笔数"></el-table-column>
                            <el-table-column align="center" prop="m12" label="金额"></el-table-column>
                        </el-table-column>
                        <el-table-column align="center" label="售币类定制套餐">
                            <el-table-column align="center" prop="t13" label="笔数">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.t13*1==0">0</span>
                                    <el-button v-else type="text" @click="getInfoClick('shou',scope.row)">
                                        {{scope.row.t13}}</el-button>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" prop="m13" label="金额">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.m13*1==0">0</span>
                                    <el-button v-else type="text" @click="getInfoClick('shou',scope.row)">
                                        {{scope.row.m13}}</el-button>
                                </template>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column align="center" label="合计">
                            <el-table-column align="center" prop="t14" label="笔数"></el-table-column>
                            <el-table-column align="center" prop="m14" label="金额"></el-table-column>
                        </el-table-column>
                    </el-table>
                </template>
                <template v-else-if="formInline.type==2">
                    <el-table highlight-current-row show-summary :data="list" v-loading.body="listLoading" border
                        size="small" :key="formInline.type">
                        <el-table-column align="center" label="日期" width="90">
                            <template slot-scope="scope">
                                <span
                                    :class="(scope.row.week==5)?'fridayColor':(scope.row.week==0||scope.row.week==6)?'weekendColor':''">{{scope.row.datetime}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="10次卡">
                            <el-table-column align="center" prop="t1" label="笔数"></el-table-column>
                            <el-table-column align="center" prop="m1" label="金额"></el-table-column>
                        </el-table-column>
                        <el-table-column align="center" label="20次卡">
                            <el-table-column align="center" prop="t2" label="笔数"></el-table-column>
                            <el-table-column align="center" prop="m2" label="金额"></el-table-column>
                        </el-table-column>
                        <el-table-column align="center" label="6次卡">
                            <el-table-column align="center" prop="t10" label="笔数"></el-table-column>
                            <el-table-column align="center" prop="m10" label="金额"></el-table-column>
                        </el-table-column>
                        <el-table-column align="center" label="12次卡">
                            <el-table-column align="center" prop="t11" label="笔数"></el-table-column>
                            <el-table-column align="center" prop="m11" label="金额"></el-table-column>
                        </el-table-column>
                        <el-table-column align="center" label="月卡">
                            <el-table-column align="center" prop="t12" label="笔数"></el-table-column>
                            <el-table-column align="center" prop="m12" label="金额"></el-table-column>
                        </el-table-column>
                        <el-table-column align="center" label="季卡">
                            <el-table-column align="center" prop="t3" label="笔数"></el-table-column>
                            <el-table-column align="center" prop="m3" label="金额"></el-table-column>
                        </el-table-column>
                        <el-table-column align="center" label="年卡">
                            <el-table-column align="center" prop="t4" label="笔数"></el-table-column>
                            <el-table-column align="center" prop="m4" label="金额"></el-table-column>
                        </el-table-column>
                        <el-table-column align="center" label="星星卡">
                            <el-table-column align="center" prop="t5" label="笔数">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.t5*1==0">0</span>
                                    <el-button v-else type="text" @click="getInfoClick('xing',scope.row)">
                                        {{scope.row.t5}}</el-button>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" prop="m5" label="金额">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.m5*1==0">0</span>
                                    <el-button v-else type="text" @click="getInfoClick('xing',scope.row)">
                                        {{scope.row.m5}}</el-button>
                                </template>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column align="center" label="门票类">
                            <el-table-column align="center" prop="t6" label="笔数">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.t6*1==0">0</span>
                                    <el-button v-else type="text" @click="getInfoClick('menpiao',scope.row)">
                                        {{scope.row.t6}}</el-button>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" prop="m6" label="金额">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.m6*1==0">0</span>
                                    <el-button v-else type="text" @click="getInfoClick('menpiao',scope.row)">
                                        {{scope.row.m6}}</el-button>
                                </template>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column align="center" label="陪同票">
                            <el-table-column align="center" prop="t7" label="笔数"></el-table-column>
                            <el-table-column align="center" prop="m7" label="金额"></el-table-column>
                        </el-table-column>
                        <el-table-column align="center" label="门禁区定制套餐">
                            <el-table-column align="center" prop="t8" label="笔数">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.t8*1==0">0</span>
                                    <el-button v-else type="text" @click="getInfoClick('menjin',scope.row)">
                                        {{scope.row.t8}}</el-button>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" prop="m8" label="金额">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.m8*1==0">0</span>
                                    <el-button v-else type="text" @click="getInfoClick('menjin',scope.row)">
                                        {{scope.row.m8}}</el-button>
                                </template>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column align="center" label="合计">
                            <el-table-column align="center" prop="t9" label="笔数"></el-table-column>
                            <el-table-column align="center" prop="m9" label="金额"></el-table-column>
                        </el-table-column>
                    </el-table>
                </template>
                <template v-else-if="formInline.type==3">
                    <el-table highlight-current-row show-summary :data="list" v-loading.body="listLoading" border
                        size="small" :key="formInline.type">
                        <el-table-column align="center" label="日期" width="90">
                            <template slot-scope="scope">
                                <span
                                    :class="(scope.row.week==5)?'fridayColor':(scope.row.week==0||scope.row.week==6)?'weekendColor':''">{{scope.row.datetime}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="商品销售">
                            <el-table-column align="center" prop="t1" label="订单笔数"></el-table-column>
                            <el-table-column align="center" prop="m1" label="金额"></el-table-column>
                        </el-table-column>
                        <el-table-column align="center" label="扫码支付">
                            <el-table-column align="center" prop="t2" label="笔数"></el-table-column>
                            <el-table-column align="center" prop="m2" label="金额"></el-table-column>
                        </el-table-column>
                        <el-table-column align="center" label="兑币机">
                            <el-table-column align="center" prop="t3" label="笔数">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.t3*1==0">0</span>
                                    <el-button v-else type="text" @click="getInfoClick('dui',scope.row)">
                                        {{scope.row.t3}}</el-button>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" prop="m3" label="金额">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.m3*1==0">0</span>
                                    <el-button v-else type="text" @click="getInfoClick('dui',scope.row)">
                                        {{scope.row.m3}}</el-button>
                                </template>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column align="center" label="E舞成名卡">
                            <el-table-column align="center" prop="t8" label="笔数"></el-table-column>
                            <el-table-column align="center" prop="m8" label="金额"></el-table-column>
                        </el-table-column>
                        <el-table-column align="center" label="换卡补卡续期">
                            <el-table-column align="center" prop="t4" label="笔数">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.t4*1==0">0</span>
                                    <el-button v-else type="text" @click="getInfoClick('huan',scope.row)">
                                        {{scope.row.t4}}</el-button>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" prop="m4" label="金额">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.t4*1==0">0</span>
                                    <el-button v-else type="text" @click="getInfoClick('huan',scope.row)">
                                        {{scope.row.t4}}</el-button>
                                </template>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column align="center" label="杂项入账">
                            <el-table-column align="center" prop="t5" label="笔数">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.t5*1==0">0</span>
                                    <el-button v-else type="text" @click="getInfoClick('za',scope.row)">{{scope.row.t5}}
                                    </el-button>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" prop="m5" label="金额">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.m5*1==0">0</span>
                                    <el-button v-else type="text" @click="getInfoClick('za',scope.row)">{{scope.row.m5}}
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column align="center" label="员工内买">
                            <el-table-column align="center" prop="t6" label="订单笔数"></el-table-column>
                            <el-table-column align="center" prop="m6" label="金额"></el-table-column>
                        </el-table-column>
                        <el-table-column align="center" label="合计">
                            <el-table-column align="center" prop="t7" label="笔数"></el-table-column>
                            <el-table-column align="center" prop="m7" label="金额"></el-table-column>
                        </el-table-column>
                    </el-table>
                </template>
                <template v-else-if="formInline.type==4">
                    <el-table show-summary highlight-current-row :data="list" v-loading.body="listLoading" border
                        size="small" :key="formInline.type">
                        <el-table-column align="center" label="合计">
                            <el-table-column align="center" label="日期" width="90">
                                <template slot-scope="scope">
                                    <span
                                        :class="(scope.row.week==5)?'fridayColor':(scope.row.week==0||scope.row.week==6)?'weekendColor':''">{{scope.row.datetime}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" prop="m1" label="售币类收入（合计）"></el-table-column>
                            <el-table-column align="center" prop="m2" label="门禁类收入（合计）"></el-table-column>
                            <el-table-column align="center" prop="m3" label="其他类收入（合计）"></el-table-column>
                            <el-table-column align="center" prop="m4" label="合计类收入（合计）"></el-table-column>
                        </el-table-column>
                    </el-table>
                </template>
            </transition>
        </div>

        <!-- 弹框 -->
        <el-dialog :close-on-click-modal="false" width="80%" title="详情" :visible.sync="info_dialog">
            <template v-if="dialog_type=='huan'">
                <el-table highlight-current-row show-summary :data="info_list" v-loading.body="listLoading" border
                    size="small" :key="dialog_type">
                    <el-table-column align="center" label="卡类型">
                        <template slot-scope="scope">
                            <span v-if="scope.row.type_id==0&&scope.row.card_type_id==2">临时卡</span>
                            <span v-else-if="scope.row.type_id==0&&scope.row.card_type_id==0">会员卡</span>
                            <span v-else-if="scope.row.type_id==0&&scope.row.card_type_id==1">精英会员卡</span>
                            <span v-else-if="scope.row.type_id==1&&scope.row.card_type_id==10">10次卡</span>
                            <span v-else-if="scope.row.type_id==1&&scope.row.card_type_id==20">20次卡</span>
                            <span v-else-if="scope.row.type_id==2">季卡</span>
                            <span v-else-if="scope.row.type_id==3">年卡</span>
                            <span v-else-if="scope.row.type_id==4">星星卡</span>
                            <span v-else>'-'</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="补卡">
                        <el-table-column align="center" prop="fill_money" label="笔数"></el-table-column>
                        <el-table-column align="center" prop="fill_times" label="金额"></el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="换卡">
                        <el-table-column align="center" prop="exchange_times" label="笔数"></el-table-column>
                        <el-table-column align="center" prop="exchange_money" label="金额"></el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="续期">
                        <el-table-column align="center" prop="renewal_times" label="笔数"></el-table-column>
                        <el-table-column align="center" prop="renewal_money" label="金额"></el-table-column>
                    </el-table-column>
                </el-table>
            </template>
            <template v-else>
                <el-table highlight-current-row show-summary :data="info_list" v-loading.body="listLoading" border
                    size="small" :key="dialog_type">
                    <el-table-column align="center" prop="name" label="名称"></el-table-column>
                    <el-table-column align="center" prop="time" label="笔数"></el-table-column>
                    <el-table-column align="center" prop="money" label="金额"></el-table-column>
                </el-table>
            </template>
        </el-dialog>
    </div>
</template>
<script>
    import {
        getList,
        getInfo,
        getStoreList,
    } from "@/api/storage_control/revenueAnalysis_form";
    import { pickerOptionsF, pickerDateF, optionMaxTime } from '@/utils'
    export default {
        data() {
            return {
                dialog_type: '',
                info_dialog: false,
                list: [],
                info_list: [],
                listLoading: false,
                storeList: null,
                formInline: {
                    store_id: '',
                    begin_time: '',
                    end_time: '',
                    type: '1',
                    look_del: '0'
                },
                pickerOptions: pickerOptionsF(-1),
                pickerDate: pickerDateF(-1, -1)
            }
        },
        beforeRouteEnter(to, from, next) {
            next((vm) => {
                if (!vm.storeList) {
                    vm.getStore();
                }
            })
        },
        methods: {
            lookDelChange() {
                this.getStore();
            },
            getInfoClick(type, row) {
                this.dialog_type = type;
                this.info_dialog = true;
                getInfo({ store_id: row.store_id, datetime: row.datetime }, type).then(response => {
                    response.forEach(val => {
                        val.money *= 1;
                        val.times *= 1;
                    });
                    this.info_list = response;
                });
            },
            getStore() {
                getStoreList({ look_del: this.formInline.look_del, category_id: 327 }).then(response => {
                    this.storeList = response;
                     let data = response.filter(res => 
                        res.id == this.$store.getters.optionId
                    )
                    if(data.length>0){
                        this.formInline.store_id = data[0].id;
                    } else {
                        if(this.storeList.length > 0) {
                            this.formInline.store_id = this.storeList[0].id;
                        }
                    }
                    if (this.list.length == 0) {
                        this.tabClick()
                    }
                });
            },
            // tab切换搜索
            tabClick(tab, event) {
                this.searchClick();
            },
            // 搜索
            searchClick() {
                optionMaxTime(this.pickerDate).then(() => {//最大可选择时间区间
                    this.formInline.begin_time = this.pickerDate ? this.pickerDate[0] : '';
                    this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
                    this.fetchData();
                });
            },
            // 列表获取
            fetchData() {
                this.listLoading = true;
                getList(this.formInline).then(response => {
                    this.list = response;
                    this.listLoading = false;
                }).catch(res=>{
                    this.listLoading=false;
                })
            },
        }
    }
</script>